Skip to main content

DOM 操作的常用 API 有哪些

获取 DOM 节点​

//元素
let div = document.getElementById('div1')
//集合
let divList = document.getElementByTagName('div')
//集合
let containerList = document.getElementsByClassName(' container ')
//元素
var box=document.querySelector(".box")；//如果有类名重复只取第一个
// 集合
let pList = document.querySelectorAll('p')
//获取父元素
let parent = div1.parentElement
//获取父节点
let parent = div1.parentNode
//获取子节点
let child = div.childNodes
//查看\设置属性节点
var o=document.querySelector("#box");
var   s=  o.getAttribute("style")
console.log(s)

新增 DOM 节点​

var div1 = document.getElementById('div1')
//添加新节点
var p1 = document.createElement('p')
p1.innerHTML = 'this is p1'
div1.appendChild(p1) //添加新创建的元素

移动 DOM 节点​

var p2 = document.getElementById('p2')
div1.appendChild(p2)

移动 DOM 节点​

var div1 = document.getElementById('div1')
div1.removeChild(child[0])

Dom 操作的常用 API 有哪些？

① 获取 DOM 节点，以及节点的 property 和 Attribute ② 获取父节点，获取子节点 childNodes/ parentNode ③ 新增节点，删除节点